<template>
	<m-block class="order-card " gap="24" spa="0 0 20" @click="$emit('click')">
		<view class="flex-between">
			<view class="left">
				<m-image wh="176" :src="item.picurl" radius="15"></m-image>
			</view>
			<view class="center flex-1">
				<view class="title otp2">
					{{item.goodsName}}
				</view>
				<view class="Specification otp2">
					{{specification ||  item.sketch}}
				</view>
				<view class="price-box flex-between ">
					<m-number :cny="item.coinid != 2" unit="积分" :value="item.price" :isOmit="false"
						color="#F95F5F" size="28"></m-number>
						
					<m-text v-if="item['sendTotal'] == 1">运费：{{item.fee2}}</m-text>
				</view>
			</view>
		</view>
		<view class="amount flex-between">
			<m-text>数量</m-text>
			<uni-number-box v-model="item.buycount" :min="1" :max="item.stock" @change="onChange" />
			<!--  -->
		</view>
	</m-block>
</template>

<script>
	export default {
		name: "orderCard",
		data() {
			return {
				counts: 0,
			};
		},
		props: {
			item: {
				type: Object,
				default: () => {}

			},
			specification: {
				type: String,
				default: ''
			},
			price: {
				type: [String, Number],
				default: 0
			},
		},
		computed: {
			Coin() {
				return this.$store.state.general.enum['Coin']
			},
		},
		mounted() {

		},
		methods: {
			onChange() {
				this.$emit('onChange', this.item)
			},
		},
	}
</script>

<style lang="scss">
	.order-card {
		align-items: flex-start;
		padding: 20rpx 0;

		.left {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.center {
			flex: 1;
			padding-left: 20rpx;
			height: 176rpx;

			&>view {
				width: 100%;
				margin-bottom: 15rpx;
			}

			&>view:last-child {
				padding-bottom: 0;
			}

			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.Specification {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				width: 100%;
			}

			.tag {
				overflow: hidden;

				text {
					display: inline-block;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FA2B47;
					border: 1px solid #FA2B47;
					border-radius: 4rpx;
					padding: 0rpx 6rpx;
					margin: 0 12rpx 0 0;
				}
			}

			.price-box {
				view {
					width: unset;
				}

				.price {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333;
				}

			}
		}

		.right {
			align-items: flex-start;
			text-align: right;

		}

		.amount {
			padding-top: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
</style>